<!--
数据
{
    x:"colorPicker",
    y:"images",
    apiParam:{
        method:"post",
        url:"magical_lowcode/openapi/crud/hdy/list",
        params:[],
        filed:""
    }
}
-->

<template>
    <el-row>
      <el-col :span="24">
           <el-tabs v-model="tabValue">
             <el-tab-pane label="API列表" name="api">
                 <el-select v-model="form.apiParam.url" @change="changeApi" size="mini">
                   <el-option v-for="(item,idx) in apiList" :key="item.uuid" :label="item.name" :value="'magical_lowcode/openapi/post/'+item.uuid"></el-option>
                 </el-select>
             </el-tab-pane>
             <el-tab-pane label="库表" name="db">
                <el-tree node-key="uuid" ref="selectTree" :data="treeList" default-expand-all style="max-height:300px;overflow-y:scroll"
                         @node-click="handleNodeClick" :props="defaultProps"></el-tree>
             </el-tab-pane>
           </el-tabs>
      </el-col>
      <el-col :span="24">
           <el-form label-width="30px" size="mini">
             <el-form-item label-width="0px">
                <mc-api-param :fields="xList" :data="apiParam"></mc-api-param>
             </el-form-item>
             <el-form-item label="X轴">
               <el-select v-model="form.x"  filterable allow-create>
                 <el-option v-for="(item,idx) in xList" :key="item.name" :label="item.title" :value="item.name"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="Y轴">
               <el-select v-model="form.y"  filterable allow-create>
                 <el-option v-for="(item,idx) in yList" :key="item.name" :label="item.title" :value="item.name"></el-option>
               </el-select>
             </el-form-item>
           </el-form>
      </el-col>
    </el-row>
</template>

<script>
import McApiParam from '../components/McApiParam.vue';
export default {
    name: 'mc-api-choose',
    components:{
      McApiParam,
    },
    data () {
        return {
            treeList:[],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            apiList:[],
            api:"",
            form:this.data,
            xList:[],
            yList:[],
            tabValue:"api",
            apiParam:this.data.apiParam
        }
    },
    props:['projectUuid','dbUrl','tableUrl','apiUrl',"data"],
    watch:{
        form:{
            handler(val, oldVal){
                 this.$emit("change",val)
             },
             deep:true //true 深度监听
        }
    },
    mounted () {
       var request = this.$magicaltool.request;
       var _t = this;
       request.axios({$vue:this,method:"get",url:this.dbUrl,params:{projectUuid:_t.projectUuid}}).then(function(res) {
           _t.treeList = res.data;
       }).catch(function (error) {
           console.log(error)
       });
      request.axios({$vue:this,method:"get",url:this.apiUrl,params:{projectUuid:_t.projectUuid}}).then(function(res) {
          _t.apiList = res.data;
      }).catch(function (error) {
          console.log(error)
      });
      this.init();
    },
    methods:{
        init:function(){
            var remoteUrl = this.form.apiParam.url;
            if(remoteUrl){
                if(remoteUrl.indexOf("magical_lowcode/openapi/crud")!=-1){
                    this.tabValue = "db";
                }else{
                    this.tabValue = "api";
                }
            }
        },
        handleNodeClick:function(data,node){
            var request = this.$magicaltool.request;
            if(node.level==1){
                return;//数据库不用管
            }
            var databaseUuid = '';
            for(var i=0;i<this.treeList.length;i++){
                 var children = this.treeList[i].children;
                 if(children){
                      for(var j=0;j<children.length;j++){
                           if(children[j].uuid == data.uuid){
                             databaseUuid=this.treeList[i].uuid;
                             break;
                           }
                      }
                 }

            }
            var tableName = data.name;
            var _t = this;
            request.axios({$vue:this,method:"get",url:this.tableUrl,
                params:{projectUuid:_t.projectUuid,databaseUuid:databaseUuid,uuid:data.uuid}})
                .then(function(res) {
                var rootNode=res.data.data.rootNode;
                var tableInfo = _t.tableToFields(JSON.parse(rootNode));
                var fields = tableInfo.fields;

                _t.xList = fields;
                _t.yList = fields;
                _t.form.apiParam.url="magical_lowcode/openapi/crud/"+tableName+"/list";

            }).catch(function (error) {
                console.log(error)
            });
        },
        tableToFields:function(rootNode){
            var tableInfo = {};
            //字段信息
            var tableFields = [];//{name:"",type:"",len:2,defaultValue:"",pk:false,notNull:true,autoInc:false,comment:""}
            var children = rootNode.magicalCoder.children;
            if(children){
                for(var i=0;i<children.length;i++){
                    var field = {};
                    var elFormItem = children[i];
                    var attributes = elFormItem.attributes;
                    var magicalCoder = elFormItem.magicalCoder;
                    //注释
                    field.title = attributes.label;
                    {//寻找包含的控件
                        if(magicalCoder.children){
                            var controlNode = magicalCoder.children[0]
                            var controlAttributes = controlNode.attributes;
                            var controlMagicalCoder = controlNode.magicalCoder;
                            var tagName = controlMagicalCoder.tagName;
                            var vModel = controlAttributes['v-model'];
                            field.name = vModel;
                        }
                    }
                    tableFields.push(field);
                }
            }
            {
                for(var i=0; i<tableFields.length; i++){
                    for(var j=i+1; j<tableFields.length; j++){
                        if(tableFields[i].name==tableFields[j].name){         //第一个等同于第二个，splice方法删除第二个
                            tableFields.splice(j,1);
                            j--;
                        }
                    }
                }
            }
            tableInfo.fields = tableFields;
            return tableInfo;
        },
        changeApi:function(){
            this.xList=[];
            this.yList=[];
            this.form.x="";
            this.form.y="";
        }
    }
}
</script>

<style lang="scss">

</style>
